<template>
	<div class="container">
		<el-form label-width="140px" :model="ruleForm" :rules="rules">
			<div class="container">
				 <h3>功能配置</h3>
				 <el-row style="margin-top:20px;">
					 <el-col :span="7">
						 <el-form-item label="企业名称：">
							 {{ruleForm.abbreviation}}
						 </el-form-item>
						 <el-form-item label="所在地区：">
							{{ruleForm.area}}			 
						 </el-form-item>
					 </el-col>
					 <el-col :span="7">
						 <el-form-item label="联系人：">
							{{ruleForm.legalName}}	 
						 </el-form-item>
						 <el-form-item label="统一社会信用代码：">
								{{ruleForm.creditCode}}
						 </el-form-item>
					 </el-col>
					 <el-col :span="7">
						 <el-form-item label="联系人电话：">
								{{ruleForm.legalPhone}}			 
						 </el-form-item>
					 </el-col>
				 </el-row>
			</div>
			<div class="container" style="margin-top:20px;">
				<h3>功能菜单</h3>
				<el-row style="margin-top:20px;">
					<div v-for="(item,index) in menuList" :key="index">
						<el-col :span="8">
							<el-form-item label="产品名称">
								<el-select v-model="item.customAppName1" @change="getname(item,index)"  value-key="id"  placeholder="" style="width:200px">
									<el-option v-for="item in listall" :key="item.id" :label="item.customAppName" :value="item">{{item.customAppName}}</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="版本">
								<el-select v-model="item.version1"  value-key="customAppVersionId" @change="getversion(item,index)" placeholder="" style="width:200px">
									<el-option v-for="item in version" :key="item.customAppVersionId" :label="item.customAppVersionName" :value="item">{{item.customAppVersionName}}</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</div>
					
					<el-col>
						<el-form-item label-width="60px">
							<el-button @click="add">+添加</el-button>
						</el-form-item>
						
					</el-col>
					
				</el-row>
			</div>
			
			<el-form-item class="footerFixed" label-width="0px">
			    <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
			    <el-button @click="backPage">返回</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import { CodeToText } from 'element-china-area-data';
	import { 
		goverment_check,
		control_app_loadbycompanyId,
		company_company_setcustomapp,
		company_get_custmoapp 
	} from "@/request/supervisionCenterApi.js"
	export default{
		data(){
			return{
				ruleForm:{},
				tableData:[],
				rules:{},
				listall:[],
				versionlist:[],
				menuList:[{
					customAppName:'',
					// customAppVersionName:'',
					customAppId:'',
					// customAppVersionId:'',
					version1:"",
					customAppName1:{}
				}],
				list:[],
				index:'',
				version:[],
				// version1:{}
			}
		},
		mounted(){
			this.id = this.$route.query.id
			this.init()
			
		},
		methods:{
			// 获取产品名称
			getname(item,index){
				this.index = index
				this.version1 = {}
				this.version = []
				this.menuList[index].companyId = this.id
				this.menuList[index].appId = item.customAppName1.appId
				this.menuList[index].customAppName = item.customAppName1.customAppName
				this.menuList[index].customAppId = item.customAppName1.customAppId
			
				for(var s=0;s<this.listall.length;s++){
					this.listall[s].version = []
					if(this.listall[s].customAppId ==this.menuList[index].customAppId ){
						this.version.push(this.listall[s])
					}
				}
			},
			
			// 获取版本
			getversion(item,index){
				this.$set(this.menuList[index].version1, index , item.customAppName1.customAppVersionName)
				this.menuList[index].customAppVersionId = this.menuList[index].version1.customAppVersionId
				this.menuList[index].customAppVersionName = this.menuList[index].version1.customAppVersionName
			},
			init(){
				// 获取详细信息
				goverment_check(this.id).then((res)=>{
					this.ruleForm = res.data
					var list = this.ruleForm.area.split(",")
					var arr = ""
					for (let k = 0; k < list.length; k++) {
					    arr += CodeToText[list[k]] + "/"   
					}  
					  this.ruleForm.area = arr.substr(0,arr.length-1)
				})
				// 获取已绑定的产品
				company_get_custmoapp(this.id).then((res)=>{
					// this.menuList.appId
				
					this.menuList = res.data
				
					for(var r=0;r<this.menuList.length;r++){
						this.menuList[r].customAppName1 = this.menuList[r].customAppName
						this.menuList[r].version1= this.menuList[r].customAppVersionName
					}
					// console.log(this.menuList)
					
				})
				
				
				// 获取 产品名称及版本
				var companyid = localStorage.getItem("companyId")
				control_app_loadbycompanyId(companyid).then((res)=>{
					this.list = res.data
					for(var i=0;i<this.list.length;i++){
						this.listall.push(this.list[i])
						// this.versionlist.push(this.list[i])
						
					}
					// console.log(this.listall)
				})
			},
			
			// 点击添加一条功能菜单
			add(){
				this.menuList.push({customAppName:'',customAppVersionName:''})
			},
			
			// 返回上一页
			backPage(){
				this.$router.go(-1)
			},
			
			
			// 提交
			submitrule(){
				let data = this.menuList
				console.log(this.menuList)
				company_company_setcustomapp(this.menuList).then((res)=>{
					this.$notify({
						title: '操作成功',
						message: '配置成功',
						type: 'success'
					});
					this.$router.go(-1)
				})
			},
		}
	}
</script>

<style scoped>
	
</style>